<template>
	<view>
		<view class="content">
			
			<view class="row">
				<view class="nominal">收件人</view>
				<view class="input"><input placeholder="请输入收件人姓名" type="text" v-model="name" /></view>
			</view>
			
			<view class="row">
				<view class="nominal">电话号码</view>
				<view class="input"><input placeholder="请输入收件人电话号码" type="text" v-model="tel" /></view>
			</view>
			
			<view class="row">
				<view class="nominal">所在地区</view>
				<view class="input" @tap="chooseCity">{{region.name}}</view>
			</view>
			
			<view class="row">
				<view class="nominal">门牌号</view>
				<view class="input"><textarea v-model="detailed" auto-height="true" placeholder="输入详细地址"></textarea>
				</view>
			</view>
			
			<view class="row">
				<view class="nominal">设置默认地址</view>
				<view class="input switch">
					<switch color="#ff2626" :checked="isDefault" @change="isDefaultChange" />
				</view>
			</view>
			
		</view>
		
		<view class="save" @tap="addClick">
			<view class="btn">保存地址</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: '',
				name: '',
				tel: '',
				isDefault: false,
				themeColor: '#007AFF',
				// region: { label: '请点击选择地址', value: [], cityCode: '' },
				region: {
					name: "请点击选择地址",
					address: ""
				}, //位置名称
				detailed: '', //详细地址
				latitude: '', //经纬度
				longitude: '' //经纬度
			};
		},
		onLoad() {},
		methods: {	
			chooseCity() {
				var self = this;
				uni.chooseLocation({
					success: function(res) {
						self.region.name = res.name;
						self.region.address = res.address;
						self.latitude = res.latitude;
						self.longitude = res.longitude;
					},
					fail: (err) => {
						console.log('err', err)
					}
				});
			},
			del() {

			},
			isDefaultChange(e) {
				this.isDefault = e.detail.value;
			},
			addClick() {
				if(this.$tools.isEmptyOrSpaces(this.name)){
					return this.$tools.showMsg('收件人姓名不能为空')
				}
				if(this.$tools.isEmptyOrSpaces(this.tel)){
					return this.$tools.showMsg('电话号码不能为空')
				}
				if(this.region.name=='请点击选择地址'){
					return this.$tools.showMsg('请选择所在地区')
				}
				if(this.$tools.isEmptyOrSpaces(this.detailed)){
					return this.$tools.showMsg('详细地址不能为空')
				}
				this.$http("address.MemberAddSite", {
					mobile: this.tel,
					consignee:this.name,
					region: this.region.address,
					latitude: this.latitude,
					longitude: this.longitude,
					token: this.$tools.getToken(),
					detailed: this.detailed,
					default_site:this.isDefault?'1':'0'
				}).then(res => {
					this.$tools.showMsg('添加成功')
					uni.navigateBack()
				})
			}
		}
	}
</script>
<style lang="scss">
	.save {
		view {
			display: flex;
		}

		position: fixed;
		bottom: 0;
		width: 100%;
		height: 120upx;
		display: flex;
		justify-content: center;
		align-items: center;

		.btn {

			margin: 0 46rpx;
			height: 80upx;
			width: 100%;
			border-radius: 80upx;
			background: linear-gradient(128.5deg, rgba(250, 229, 104, 1) 0%, rgba(255, 200, 47, 1) 100%), linear-gradient(135.25deg, rgba(248, 220, 89, 1) 0%, rgba(246, 188, 87, 1) 100%), rgba(204, 204, 204, 1);

			justify-content: center;
			align-items: center;


			font-size: 30upx;
		}
	}

	.content {
		display: flex;
		flex-wrap: wrap;

		view {
			display: flex;
		}

		.row {
			width: 94%;

			margin: 0 3%;
			border-top: solid 1upx #eee;

			.nominal {
				width: 30%;
				height: 120upx;
				font-weight: 200;
				font-size: 30upx;
				align-items: center;
			}

			.input {
				width: 70%;
				padding: 20upx 0;
				align-items: center;
				font-size: 30upx;

				&.switch {
					justify-content: flex-end;
				}

				.textarea {
					margin: 20upx 0;
					min-height: 120upx;
				}
			}

			.del {
				width: 100%;
				height: 80upx;
				justify-content: center;
				align-items: center;
				font-size: 36upx;
				color: #ffffff;
				border-radius: 8rpx;
				background-color: #ff2626;
				border-bottom: solid 1upx #eee;
			}
		}
	}
</style>
